<template>
  <div class="dialog_info">
    <div class="name_aside RightCardTitle">基本信息</div>
    <div class="formdata">
      <el-row>
        <!-- <el-col :span="8">所属小流域：<span /></el-col> -->
        <el-col :span="8">所属乡镇：<span>{{ parameter.country }}</span></el-col>
        <el-col :span="8">所属村庄：<span>{{ parameter.village }}</span></el-col>
        <el-col :span="8">预警生成时间：<span>{{ $moment(parameter.ftm).format("YYYY-MM-DD HH:mm") }}</span></el-col>
      </el-row>
      <el-row>
        <el-col :span="8">预警类别：
          <span v-show="parameter.sType == '1'">监测预警</span>
          <span v-show="parameter.sType == '2'">预报预警</span>
          <span v-show="parameter.sType == '3'">风险预警</span>
        </el-col>
        <el-col :span="8">预警等级：
          <template v-if="parameter.sType == '3'">
            <span v-show="parameter.wLevel == '1'">可能性很大</span>
            <span v-show="parameter.wLevel == '2'" class="levelSpanList levelSpan2">可能性较大</span>
            <span v-show="parameter.wLevel == '3'" class="levelSpanList levelSpan3">可能性大</span>
            <span v-show="parameter.wLevel == '4'" class="levelSpanList levelSpan4">可能发生</span>
          </template>
          <template v-else>
            <span v-show="parameter.wLevel == '1'">极危险</span>
            <span v-show="parameter.wLevel == '2'" class="levelSpanList levelSpan2">危险</span>
            <span v-show="parameter.wLevel == '3'" class="levelSpanList levelSpan3">警戒</span>
            <span v-show="parameter.wLevel == '4'" class="levelSpanList levelSpan4">关注</span>
          </template>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">预警依据：
          <template v-if="parameter.sType == '3'">
            <span>
              {{ parameter.step }}小时预报降雨超过<span v-show="parameter.wLevel == '1'">可能性很大</span><span v-show="parameter.wLevel == '2'" class="levelSpanList levelSpan2">可能性较大</span> <span v-show="parameter.wLevel == '3'" class="levelSpanList levelSpan3">可能性大</span><span v-show="parameter.wLevel == '4'" class="levelSpanList levelSpan4">可能发生</span>{{ parameter.v }}mm
            </span>
          </template>
          <template v-else-if="parameter.sType == '2'">
            <span>
              {{ parameter.sCode }}洪峰流量{{ parameter.wData }}m³/s，超<span v-show="parameter.wLevel == '1'">极危险</span><span v-show="parameter.wLevel == '2'" class="levelSpanList levelSpan2">危险</span><span v-show="parameter.wLevel == '3'" class="levelSpanList levelSpan3">警戒</span><span v-show="parameter.wLevel == '4'" class="levelSpanList levelSpan4">关注</span>（预警阈值：{{ parameter.v }}m³/s）
            </span>
          </template>
          <template v-else>
            <span>
              {{ parameter.sCode }}{{ parameter.step }}小时降雨达到{{ parameter.wData }}mm，超<span v-show="parameter.wLevel == '1'">极危险</span><span v-show="parameter.wLevel == '2'" class="levelSpanList levelSpan2">危险</span><span v-show="parameter.wLevel == '3'" class="levelSpanList levelSpan3">警戒</span><span v-show="parameter.wLevel == '4'" class="levelSpanList levelSpan4">关注</span>（预警阈值：{{ parameter.v }}mm）
            </span>
          </template>
        </el-col>
      </el-row>
      <!--  <el-row>
        <el-col :span="8">预警生成时间：<span /></el-col>
        <el-col :span="8">预警更新时间：<span /></el-col>
      </el-row> -->
    </div>
    <div class="name_aside RightCardTitle">预警更新信息</div>
    <div class="EWInfo">
      <template v-if="WarningProcessList.length>0">
        <el-timeline>
          <el-timeline-item v-for="(item, index) in WarningProcessList" :key="index">
            <el-row>
              <el-col :span="8"><span class="timelineTitle">{{ item.warnState }}</span>{{ $moment(item.tm).format("YYYY-MM-DD HH:mm") }}</el-col>
              <el-col :span="16"><span class="timelineLabel">接收人：</span>{{ }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-col :span="12">
                  <span class="timelineLabel">预警等级：</span>
                  <template v-if="parameter.sType == '3'">
                    <span v-show="parameter.wLevel == '1'">可能性很大</span>
                    <span v-show="parameter.wLevel == '2'" class="levelSpanList levelSpan2">可能性较大</span>
                    <span v-show="parameter.wLevel == '3'" class="levelSpanList levelSpan3">可能性大</span>
                    <span v-show="parameter.wLevel == '4'" class="levelSpanList levelSpan4">可能发生</span>
                  </template>
                  <template v-else>
                    <span v-show="parameter.wLevel == '1'">极危险</span>
                    <span v-show="parameter.wLevel == '2'" class="levelSpanList levelSpan2">危险</span>
                    <span v-show="parameter.wLevel == '3'" class="levelSpanList levelSpan3">警戒</span>
                    <span v-show="parameter.wLevel == '4'" class="levelSpanList levelSpan4">关注</span>
                  </template>
                </el-col>
                <el-col :span="12">
                  <span class="timelineLabel">处置状态：</span>{{ }}
                </el-col>
              </el-col>
              <el-col :span="16">
                <span class="timelineLabel">预警依据：</span>{{ item.ewInfo1 }}{{ item.ewInfo2 }}
              </el-col>
            </el-row>
          </el-timeline-item>
        </el-timeline>
      </template>
      <template v-else>
        <div class="noData">暂无数据</div>
      </template>
    </div>
  </div>
</template>

<script>
import {
    GetEarlyWarningProcess
} from '@/api/zyx.js'
export default {
    components: {},
    data() {
        return {
            parameter: {},
            WarningProcessList: [],
            activities: [{
                content: '活动按期开始',
                timestamp: '2018-04-15'
            }, {
                content: '通过审核',
                timestamp: '2018-04-13'
            }, {
                content: '创建成功',
                timestamp: '2018-04-11'
            }]
        }
    },
    mounted() {
        this.GetWSDetail()
    },
    methods: {
        GetWSDetail() { // 列表页
            this.parameter = this.$store.getters.dlgParams.params
            this.isLoading = true
            const param = {
                Rvcd: this.parameter.ewcode,
                dtTime: this.parameter.Ftm,
                sType: this.parameter.sType
            }
            GetEarlyWarningProcess(param).then((res) => {
                this.isLoading = false
                if (res.isSuccess) {
                    this.WarningProcessList = res.data
                } else {
                    this.$message.error(res.message)
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
	.dialog_info {
		height: 100%;
		.formdata {
			font-size: 14px;
			color: #88c7ff;
			line-height: 32px;

			span {
				color: #fff;
			}

			/deep/ .el-col {
				padding-left: 15px;
			}
		}

		.EWInfo {
			width: 80%;
			margin: 0 auto;
			margin-top: 10px;
			height: calc(100% - 240px);
			overflow: auto;
			padding: 0 20px;
			color: #FFFFFF;
			line-height: 30px;

			.timelineTitle {
				font-size: 16px;
				font-weight: bold;
				color: #00e9ff;
				margin-right: 6px;
			}

			.timelineLabel {
				font-size: 14px;
				color: #88c7ff;
      }
      .noData{
        margin-top:20px;
      }
		}
	}

	/deep/ .el-timeline-item__tail {
		border-left: 2px solid #1b1670;
	}

	/deep/.el-timeline-item__node--normal {
		width: 20px;
		height: 20px;
		left: -4px;
	}

	/deep/.el-timeline-item__node {
		background-color: #649ff4;
	}

	/deep/.el-timeline-item__content {
		color: #FFFFFF;
	}
</style>
